<template>
  <div>
    <div class="element_header"></div>
    <div class="element_content" @scroll="onScroll">
      <div class="element_content_waper">
        <div class="element_box" v-for="(item, index) in list" :key="index">
          <img :src="item.productImage" alt="" />
          <div>
            <span>{{ item.productName }}</span>
            <span>{{ item.salePrice }}</span>
          </div>
        </div>

      
      </div>
    </div>
    <div class="element_footer"   v-show="isLoading">
        <img src="./timg (2).gif" alt="">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      coplist: [],
      resList: [],
    
      isLoading:false
    };
  },
  mounted() {
    this.$axios("/data.json").then((res) => {
      console.log(res);
      this.list = res.data.result.list;
      //   console.log(this.list.productImage);
    });
    this.$axios("/data2.json").then((res) => {
      console.log(res);
      this.coplist = res.data.result.list;
      //   console.log(this.list.productImage);
    });
    this.$axios("/data3.json").then((res) => {
      console.log(res);
      this.resList = res.data.result.list;
      //   console.log(this.list.productImage);
    });
  },
  methods: {
    onScroll(event) {
        // console.log(event);
      //获取可视高度
      var clientHeight = event.target.clientHeight;
      console.log(clientHeight);
      //获取滚动视图的高度
      var scrollHeight = event.target.scrollHeight;
      console.log(scrollHeight);
      //获取滚动视图的高度
      var scrollTop = event.target.scrollTop
    console.log(scrollTop);
      if(scrollHeight-scrollTop-clientHeight === 1){
            this.isLoading = true;
            setTimeout(()=>{
      
          this.isLoading = false;
        },3000)
      }
    },
  },
};
</script>
<style lang="scss">
.element_header {
  width: 100%;
  height: 90px;
  background-color: lightsteelblue;
}
.element_content {
  width: 90%;
  height: 440px;
  background-color: lightgoldenrodyellow;
  margin: 0 auto;
  overflow: scroll;
  .element_content_waper {
    width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    // .adda {
    //   display: inline-flex;
    //   justify-content: flex-start;
    //   flex-wrap: wrap;

    .element_box {
      width: 30%;
      height: 200px;
      //   background-color: lightseagreen;
      box-sizing: border-box;
      border: 1px solid red;
      margin: 5px;
      text-align: center;

      img {
        width: 70%;
        height: 140px;
      }

      //   }
    }
  }
}
.element_footer{
    width: 100%;
    text-align: center;
    img{
        width: 80px;
        height: 80px;
    }
}
</style>